<template>
    <div id="tmpl">
        <ul class="mui-table-view">
                <li class="mui-table-view-cell mui-media" v-for="item in list">
                    <a href="javascript:;">
                        <img class="mui-media-object mui-pull-left" :src="item.picInfo[0].url">
                        <div class="mui-media-body">
                            {{item.title}}
                            <!--<p class='mui-ellipsis'>{{item.digest}}</p>-->
                            <div class="ft">
                                <span>发表时间：{{item.ptime | datafmt('YYYY-MM-DD HH:mm:ss') }}</span>
                                <span class="click">点击量：{{item.tcount}}</span>
                            </div>
                        </div>
                    </a>
                </li>
        </ul>
    </div>
</template>


<script>
    import {Toast} from 'mint-ui';

    export default{
        data(){
            return {
                list:[]  //新闻列表功能
            }
        },
        created(){
            this.getlist();
        },
        methods:{
            //获取api中的新闻资讯数据
            getlist(){
                //1.0 确定url
                var url = 'https://www.apiopen.top/journalismApi';

                //2.0 调用$http.get()方法请求到数据
                this.$http.get(url).then(function (response) {
                    //3.0 获取到响应报文体数据
                    var body = response.body;
                    //4.0 判断响应报文体中的状态值，如果不是200的话，就将服务器响应回来的错误消息提示给用户
                    if (body.code != 200) {
                        Toast(body.msg);
                        return;
                    }
                    //5.0 如果服务器返回的数据正常则赋值给this.list
                    this.list = body.data.sports;
                });
            }
        }
    }
</script>


<style scoped>
    .mui-table-view img{
        height: 50px;
        width: 50px;
    }

    .mui-table-view .mui-media-object{
        max-width: 80px;
        line-height: 80px;
    }

    .ft{
        margin-top: 1em;
        font-size: 14px;
        color: #007aff;
    }
    .ft .click{
        margin-left: 20px;
    }

</style>